<template>
  <div class="app-container">

    <div class="filter-container">

      <div>
        <el-upload style="float: left"
          class="upload-demo "
          :action="'/guard/user/lipei/uploadLiPei?token='+token"
          accept=".xls,.xlsx"
          :show-file-list="false"
          :on-success="uploadSuccess"
        >
          <el-button size="small" type="primary" class="filter-item">导入理赔单</el-button>
        </el-upload>
        <el-button @click="download({id:1},'lipei')" style="width: 100px;margin-left: 10px" size="small" type="primary" class="filter-item">下载模板</el-button>
      </div>

      <el-input  style="width: 200px;"   v-model="query.importNumber" placeholder="导入编号" class="filter-item"  ></el-input>
      <el-input  style="width: 200px;"   v-model="query.caseNumber" placeholder="立案号" class="filter-item"  ></el-input>
      <el-input  style="width: 200px;"   v-model="query.baoXianName" placeholder="被保险人" class="filter-item"  ></el-input>
      <el-input  style="width: 200px;"   v-model="query.carNumber" placeholder="车牌号" class="filter-item"  ></el-input>
      <el-input type="number" style="width: 120px;"   v-model="query.dingSunPrice[0]" placeholder="未决金额" class="filter-item"  ></el-input>
      <span> - </span>
      <el-input type="number" style="width: 120px;"   v-model="query.dingSunPrice[1]" placeholder="未决金额" class="filter-item"  ></el-input>
      <el-date-picker class="filter-item"
        v-model="query.chuXianDate"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="出险时间"
        end-placeholder="出险时间"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
      >
      </el-date-picker>
      <el-date-picker class="filter-item"
        v-model="query.createdAt"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="创建时间"
        end-placeholder="创建时间"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
      >
      </el-date-picker>

      <el-button @click="getRecords" type="primary" class="filter-item">查询</el-button>
      <el-button @click="getRecords" type="primary" class="filter-item">刷新</el-button>
      <el-button @click="exportFile" type="primary" class="filter-item">导出</el-button>
    </div>

    <el-table v-loading="listLoading"	:data="list"	element-loading-text="Loading"	border	fit	highlight-current-row
              v-horizontal-scroll="'always'"
    >
      <!-- <el-table-column type="selection" width="55" /> -->
      <!-- <el-table-column type="index" label="序列" width="50" /> -->
      <el-table-column prop="import_number" label="导入编号" width="180" />
      <el-table-column prop="case_number" label="立案号" width="180" />
      <el-table-column prop="bao_dan_number" label="保单号" width="180" />
      <el-table-column prop="toubao_name" label="投保人" width="120" />
      <el-table-column prop="baoxian_name" label="被保险人" width="120" />
      <el-table-column prop="chu_xian_date" label="出险时间" width="160" />
      <el-table-column prop="chu_xian_place" label="出险地点" width="150" />
      <el-table-column prop="car_number" label="车号" width="100" />
      <el-table-column prop="loss_price" label="未决金额" width="80" />
      <el-table-column prop="is_cancel_case" label="是否销案" width="80" />
      <el-table-column show-overflow-tooltip prop="reason" label="事故原因" width="300" />
      <el-table-column prop="get_guard_user.name" label="账号" width="120" />
      <el-table-column prop="created_at" label="创建时间" width="160" />
      <el-table-column v-if="account=='SuperAdmin'"  fixed="right" label="操作" width="130">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="[10, 20, 100, 200]"
      :page-size="pagination.pageSize"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>

    <el-dialog :title="isAdd?'添加':'编辑'"  :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="100px"   v-loading="formLoading" >
        <el-form-item label="立案号" >
          <el-input v-model="form.case_number"></el-input>
        </el-form-item>

        <el-form-item label="保单号" >
          <el-input v-model="form.bao_dan_number"></el-input>
        </el-form-item>
        <el-form-item label="投保人" >
          <el-input v-model="form.toubao_name"></el-input>
        </el-form-item>
        <el-form-item label="被保险人" >
          <el-input v-model="form.baoxian_name"></el-input>
        </el-form-item>
        <el-form-item label="出险时间" >
          <el-date-picker
            v-model="form.chu_xian_date"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="车号" >
          <el-input v-model="form.car_number"></el-input>
        </el-form-item>

        <el-form-item label="未决金额" >
          <el-input type="number" v-model="form.loss_price"></el-input>
        </el-form-item>

        <el-form-item label="是否销案" >
          <el-radio v-model="form.is_cancel_case" label="是">是</el-radio>
          <el-radio v-model="form.is_cancel_case" label="否">否</el-radio>
        </el-form-item>

        <el-form-item >
          <el-button type="primary" @click="onSubmit('form')">{{isAdd?'添加':'修改'}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


  </div>
</template>

<script>

import { myGet,myPost } from '@/utils/myRequest'
import { getToken } from '@/utils/auth'
import { exportXls, toParams } from '@/utils/myUtils'

const urlUserLst = '/guard/user/lipei/lst';
const urlUploadLiPei = '/guard/user/lipei/uploadLiPei';
const urlDetail = '/guard/user/lipei/detail'
const urlAdd = '/guard/user/lipei/change'
const urlDel = '/guard/user/lipei/del'
const urlExport = '/guard/user/lipei/exportFile'
const urlDownload = '/guard/download';
export default {

  data() {
    return {
      query:{
        importNumber:'',
        baoXianName:'',
        carNumber:'',
        caseNumber:'',
        chuXianDate:[],
        createdAt:[],
        dingSunPrice:['',''],
      },
      form:{
        case_number:'',
        bao_dan_number:'',
        toubao_name:'',
        baoxian_name:'',
        chu_xian_date:'',
        car_number:'',
        loss_price:'',
        is_cancel_case:'是',
      },
      token:'',
      account:'',
      host:process.env.VUE_APP_HOST,
      isAdd:false,
      dialogFormVisible:false,
      list: [],
      formLoading:false,
      listLoading: true,

      pagination:{
        total:0,
        page:1,
        pageSize:20,
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  methods: {

    exportFile(){
      const url = urlExport+"?"+toParams(this.query)
      exportXls(url)
    },
    download(row,type){
      const url = urlDownload+"?type="+type+"&id="+row.id
      console.log(url)
      exportXls(url)
    },

    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //this.formLoading = true;
          myPost(urlAdd,this.form).then(res=>{
            this.formLoading = false;
            if(res.status){
              this.dialogFormVisible = false
              Object.assign(this.form,this.$options.data().form)
              this.$message.success(res.msg);
              this.reload();
            }
          })
        } else {
          //this.$message.error('验证失败！');
          return false;
        }
      });
    },
    openAddDialog(){
      Object.assign(this.form,this.$options.data().form);
      this.dialogFormVisible = true
    },
    reload(){
      Object.assign(this.$data.query,this.$options.data().query)
      Object.assign(this.$data.pagination,this.$options.data().pagination)
      this.getRecords()
    },
    getRecords(){
      this.listLoading = true;
      let params = Object.assign(this.query,this.pagination)
      myGet(urlUserLst,params).then((res) =>{
        this.listLoading = false;
        if(res.status){
          this.list = res.data.records
          this.pagination.total = res.data.total
        }
      })
    },
    changeStatus(row){
      myPost(urlAdd,{id:row.id, status:row.status}).then(res => {
        if(res.status){
          this.$message.success(res.msg)
        }
      })
    },
    handleEdit( row) {
      const id = row.case_number
      myGet(urlDetail,{id}).then(res=>{
        if(res.status){
          Object.assign(this.form,res.data.records);
          this.dialogFormVisible = true
        }
      })
    },
    handleDelete( row) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let case_number = row.case_number
        myGet(urlDel, { case_number }).then(res => {
          if (res.status) {
            this.$message.success(res.msg);
            this.reload();
          }
        })
      })
    },
    uploadSuccess(res, file, fileList){
      if(res.status){
        this.$message.success(res.msg)
        this.reload()
      }
    },

    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pagination.page = 1
      this.getRecords()
    },
    handleCurrentChange(val) {
      this.pagination.page = val
      this.getRecords();
    },
    //多选
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    }
  },
  mounted() {
    this.getRecords()
    this.token = getToken();

    myGet('/guard/rbac/guardUser/getUserByToken',{token:this.token}).then(res=>{
      if(res.status){
        this.account = res.data.records[0].name
      }
    })


  }
}
</script>

<style>

.table-img{
  width: 50px;
  height: 50px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>


